<template>
	<view>
		<view class="container">
			<view class="goodsLeftList">
				<view class="list-item" v-for="(item, index) in left.list" :key="index" :class="{ show: item.show, delete: item.delete }">
					<view class="list-item-inner">
						<image class="image" :src="item.path" @click="goItemImg(item)" mode="widthFix"></image>
						<view @click="goThumbs(item.data)" class="img-border" v-if="item.data.isNoThumbs === 1"><image :src="thumbsImgYellow"></image></view>
						<view class="img-border" @click="goThumbs(item.data)" v-else><image :src="thumbsImgHeart"></image></view>
						<view class="content">
							<p class="title">{{ item.data.diaryContent || '' }}</p>
							<p class="time">{{ item.data.createTime.split(/\s+/)[0].replace(/-/g, '.') || '' }}</p>
						</view>
						<view class="remove" @click="deleteDiary(item, left)"></view>
					</view>
				</view>
			</view>
			<view class="goodsRightList">
				<view class="list-item" v-for="(item, index) in right.list" :key="index" :class="{ show: item.show, delete: item.delete }">
					<view class="list-item-inner">
						<image class="image" :src="item.path" @click="goItemImg(item)" mode="widthFix"></image>
						<view @click="goThumbs(item.data)" class="img-border" v-if="item.data.isNoThumbs === 1"><image :src="thumbsImgYellow"></image></view>
						<view class="img-border" @click="goThumbs(item.data)" v-else><image :src="thumbsImgHeart"></image></view>
						<view class="content">
							<p class="title">{{ item.data.diaryContent || '' }}</p>
							<p class="time">{{ item.data.createTime.split(/\s+/)[0].replace(/-/g, '.') || '' }}</p>
						</view>
						<view class="remove" @click="deleteDiary(item, right)"></view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" class="wrap">
			<view class="chat">
				<view class="tit">提示</view>
				<view class="sureDetele">确认删除？</view>
				<view class="btn">
					<view class="cancel" @click="cancel()">取消</view>
					<view class="line"></view>
					<view class="sure" @click="sure()">确定</view>
				</view>
			</view>
		</uni-popup>
		<mix-load-more :status="loading"></mix-load-more>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	components: {
		uniNavBar,
		uniIcons,
		mixLoadMore
	},
	data() {
		const sysInfo = uni.getSystemInfoSync();
		return {
			scale: 750 / sysInfo.windowWidth,
			oldData: undefined,
			isNoThumbs: 0,
			type: '',
			list: [],
			left: { height: 0, list: [] },
			right: { height: 0, list: [] },
			loading: 0,
			pageNum: 1,
			beautifulDiaryId: '',
			position: '',
			det: {},
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/heart.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png'
		};
	},
	mounted() {
		this.listData();
	},
	onReachBottom() {
		//当划到最底部的时候触发事件
		if (this.loading != 2) {
			this.listData();
		}
	},
	methods: {
		async createWaterful() {
			const { list, left, right } = this;
			const imageList = [];
			let item;
			while ((item = list.shift())) {
				imageList.push(this.getImageInfo(item));
			}
			const imageInfos = await Promise.all(imageList);
			const list1 = [],
				list2 = [];
			let index = 0;
			for (let info of imageInfos) {
				this.addOpacity(info, index++);
				const height = this.getCalcHeight(info);
				if (left.height <= right.height) {
					list1.push(info);
					left.height += height;
				} else {
					list2.push(info);
					right.height += height;
				}
			}
			left.list = [...left.list, ...list1];
			right.list = [...right.list, ...list2];
		},
		getCalcHeight(info) {
			return 323 * this.scale / 2 / info.width * info.height + this.scale * 96;
		},
		addOpacity(info, index) {
			setTimeout(() => {
				info.show = true;
			}, index * 100);
		},
		getImageInfo(item, index) {
			return new Promise(resolve => {
				uni.getImageInfo({
					src: item.imgUrl,
					success: res => {
						res.data = item;
						res.show = false;
						res.delete = false;
						resolve(res);
					}
				});
			});
		},
		listData() {
			this.loading = 1;
			http('/api/cusUserInfo/getBeautifulDiaryClockByCustomerId', { method: 'GET', data: { pageNum: this.pageNum, pageSize: 10 } }).then(async result => {
				let data = result.rows || [];
				data.forEach((item, index) => {
					item.imgUrl = item.imgUrl + '?x-oss-process=image/auto-orient,1/interlace,1/resize,p_40/quality,q_60';
				});
				this.list = this.list.concat(data); //进行数据的累加
				await this.createWaterful();
				if (data.length == 10) {
					this.pageNum++; //页数的++
					this.loading = 0;
				} else {
					this.loading = 2;
				}
				this.loading = this.left.list.length + this.right.list.length === 0 ? 3 : this.loading;
			});
		},
		
		
		deleteDiary(item, position) {
			this.$refs.popup.open();
			this.beautifulDiaryId = item.data.cusDiaryId;
			this.position = position;
			this.det = item
			// const id = item.data.cusDiaryId;
			// uni.showModal({
			// 	title: '提示',
			// 	content: '确认删除？',
			// 	confirmColor: '#66645D',
			// 	cancelColor: '#8A8C8D',
			// 	success: res => {
			// 		if (res.confirm) {
			// 			http(`api/cusBeautifulDiary/deleteSelfDiary/${id}`, { method: 'DELETE' }).then(result => {
			// 				uni.showToast({
			// 					title: result.msg,
			// 					icon: 'none'
			// 				});
			// 				position.height -= this.getCalcHeight(item);
			// 				item.delete = true;
			// 				this.resize()
			// 			});
			// 		}
			// 	}
			// });
		},
		
		sure() {
			http(`api/cusBeautifulDiary/deleteSelfDiary/${this.beautifulDiaryId}`, { method: 'DELETE' }).then(result => {
				uni.showToast({
					title: result.msg,
					icon: 'none'
				});
				this.$refs.popup.close();
				this.position.height -= this.getCalcHeight(this.det);
				this.det.delete = true;
				this.resize()
			});
		},
		cancel() {
			this.$refs.popup.close();
		},
		
		
		resize() {
			const {left, right} = this;
			if(left.height > right.height && left.list.length > 1) {
				const list = left.list;
				const last = list[list.length - 1];
				const height = this.getCalcHeight(last);
				if(left.height - height > right.height) {
					const item = list.pop();
					left.height -= height;
					right.list.push(item);
					this.resize();
				}
			}else if(right.height > left.height && right.list.length > 1) {
				const list = right.list;
				const last = list[list.length - 1];
				const height = this.getCalcHeight(last);
				if(right.height - height > left.height) {
					const item = list.pop();
					left.list.push(item);
					right.height -= height;
					this.resize();
				}
			}
		},
		goItemImg(item) {
			this.oldData = item;
			uni.navigateTo({
				url: '../interaction/diary/info/index?cusDiaryId=' + item.data.cusDiaryId + '&from=my',
				animationType: 'pop-in',
				animationDuration: 200,
				// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				events: {
					updateDirayInfo: data => {
						if (this.oldData) {
							console.log(data)
							this.oldData.data.isNoThumbs = data;
						}
					},
					updateDeleteDiray: status => {
						if (this.oldData) {
							this.oldData.delete = status;
						}
					}
				}
			});
		},
		/**
		 * @param {Object} options
		 * 点赞/取消点赞
		 */
		goThumbs(options) {
			if (options.isNoThumbs === 0) {
				//当前为 未点赞状态
				this.isNoThumbs = 1; //赋值 点赞=1
			} else {
				this.isNoThumbs = 0;
			}
			this.optionsData = {
				contentId: options.cusDiaryId,
				likeType: this.isNoThumbs, //调用点赞=1
				diaryType: 2 //美好日记，无运维日记，用户=2
			};
			if (options.isNoThumbs !== 1) {
				// 如当前是未被点赞=0，调用点赞接口
				http('/api/cusBeautifulDiary/dataIncr', { method: 'POST', data: this.optionsData }).then(result => {
					options.isNoThumbs = 1;
					options.thumbsImgHeart = '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png';
					options.thumbsImgYellow = '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png';
				});
			} else {
				//取消点赞
				http('/api/cusBeautifulDiary/dataDecr', { method: 'POST', data: this.optionsData }).then(result => {
					options.isNoThumbs = 0;
					options.thumbsImgHeart = '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/heart.png';
					options.thumbsImgYellow = '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/heart.png';
				});
			}
		},
		updateDirayInfo(isNoThumbs) {
			if (this.oldData) {
				this.oldData.data.isNoThumbs = isNoThumbs;
			}
		}
	}
};
</script>
<style scoped lang="less">
.wrap {
		width: 100%;
		text-align: center;
		.chat {
			background: #fff;
			border-radius: 20rpx;
			width: 680rpx;
			// padding:0 48rpx;
			.tit {
				font-size: 36rpx;
				color: #66645D;
				padding-top: 42rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 0 0;
			}
			.sureDetele {
				padding: 42rpx 0;
				font-size: 28rpx;
				background: #f7f7f7;
				color: #66645D;
			}
			.btn {
				height: 100rpx;
				background: #fff;
				display: flex;
				align-items: center;
				font-size: 36rpx;
				justify-content: space-around;
				border-radius: 0 0 24rpx 24rpx;
				.cancel {
					color: rgba(138, 140, 141, 1);
					width: 49.5%;
				}
				.line {
					height: 70rpx;
					width:1px;
					background: rgba(138, 140, 141, 0.1);
				}
				.sure {
					color: #F39800;
					width: 49.5%;
				}
			}
		}
		
	}
.container {
	display: flex;
	flex-wrap: wrap;
	padding: 24rpx 40rpx;
	.goodsLeftList,
	.goodsRightList {
		width: calc(50% - 12rpx);
		.list-item {
			display: inline-block;
			width: 100%;
			flex-shrink: 0;
			margin-bottom: 24rpx;
			transition: all 1s;
			opacity: 0;
			&.show {
				opacity: 1;
			}
			&.delete {
				display: none;
			}
			.list-item-inner {
				background: #fff;
				border-radius: 12rpx;
				overflow: hidden;
				border-style: solid 2rpx #ffffff;
				position: relative;

				.image {
					width: 100%;
				}
				.content {
					padding: 24rpx;
					.title {
						font-size: 26rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(102, 100, 93, 1);
						line-height: 37rpx;
						height: 74rpx;
						margin-bottom: 38rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.name {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(138, 140, 141, 0.5);
						margin-bottom: 4rpx;
						line-height: 33rpx;
					}
					.time {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(138, 140, 141, 0.5);
						line-height: 33rpx;
					}
				}
				.img-border {
					position: absolute;
					z-index: 2;
					top: 8rpx;
					right: 8rpx;
					background: rgba(0, 0, 0, 0.05);
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					display: inline-flex;
					align-items: center;
					justify-content: center;

					image {
						width: 26rpx;
						height: 26rpx;
						background: transparent;
						// background-position : -100 -100;
					}
				}
			}
		}
	}
	.goodsLeftList {
		margin-right: 12rpx;
	}
	.goodsRightList {
		margin-left: 12rpx;
	}
}
.add-diary {
	width: 140rpx;
	height: 140rpx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 36rpx;
	z-index: 100;
	image {
		width: 100%;
		height: 100%;
	}
}
.remove {
	position: absolute;
	padding: 28rpx;
	right: 0;
	bottom: 0;
	height: 78rpx;
	width: 78rpx;
	background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/delete.png) center center no-repeat;
	background-size: 30rpx 30rpx;
}
</style>
